span
<template>
  <div class="page-layout">
    <el-container>
      <el-aside>
        <div class="aside">
          <el-card>
            <div class="progress">
              <el-progress :text-inside="true" :percentage="progress.pRate > 100 ? 100 : progress.pRate" :stroke-width="20">
                <span>月产实际/目标：{{ progress.actualP }}/{{ progress.targetP }}</span>
              </el-progress>
              <el-progress
                :text-inside="true"
                :percentage="progress.sRate > 100 ? 100 : progress.sRate"
                :stroke-width="20"
                :status="progress.sRate > 100 ? 'exception' : progress.sRate > 80 ? 'warning' : 'success'"
              >
                <span>月产超欠/月准发超欠：{{ progress.actualS }}/{{ progress.targetS }}</span>
              </el-progress>
            </div>
          </el-card>
          <el-card>
            <div class="calendar">
              <el-calendar ref="calendar" size="small" style="--el-calendar-border: none" />
            </div>
          </el-card>
          <el-card>
            <div class="curCrew">
              <span>当前班组：{{ curCrew }}</span>
              <el-button type="primary" size="small">查看考勤</el-button>
            </div>
          </el-card>
          <el-card>
            <PersonInfoDisplay :left-text="'镀锌质检'" :left-worker="'张耀升'" :right-text="'顶岗人员'" :right-worker="'潘广宇'" />
          </el-card>
          <el-card>
            <div class="carousel">
              <el-carousel autoplay direction="vertical" :interval="3000">
                <el-carousel-item v-for="(item, index) in process" :key="item">
                  <div class="carousel-item">
                    <span class="title">{{ processSub[index] }}</span>
                    <span class="sub">{{ item }}</span>
                    <div class="text-decoration"></div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-card>
        </div>
      </el-aside>
      <el-main>
        <div class="area">
          <el-card class="item">
            <div class="radio-single">
              <el-radio-group v-model="radio1_1" text-color="#626aef" fill="rgb(239, 240, 253)" class="radio-right" size="small">
                <el-radio-button label="日" value="day" />
                <el-radio-button label="周" value="week" />
                <el-radio-button label="月" value="month" />
              </el-radio-group>
            </div>
            <graph-bar-line
              :data-bar1="plan"
              :data-bar2="actual"
              :data-line1="completion"
              :data-line2="utilizationRate"
              :datax="getDateArray(8)"
              :title="'5#镀锌机组产量'"
              :bar-name="['计划产量', '实际产量']"
              :line-name="['完成率', '产能利用率']"
              :format-val="['完成率', '产能利用率']"
            />
          </el-card>
          <el-card class="item">
            <div class="radio-group">
              <el-radio-group v-model="radio2_1" text-color="#626aef" fill="rgb(239, 240, 253)" size="small">
                <el-radio-button label="度次降" value="度次降" />
                <el-radio-button label="生产降级" value="生产降级" />
                <el-radio-button label="设备降级" value="设备降级" />
              </el-radio-group>
              <el-radio-group v-model="radio2_2" text-color="#626aef" fill="rgb(239, 240, 253)" size="small">
                <el-radio-button label="日" value="day" />
                <el-radio-button label="周" value="week" />
                <el-radio-button label="月" value="month" />
              </el-radio-group>
            </div>
            <graph-bar-line
              :data-bar1="downTotal"
              :data-bar2="downProduction"
              :data-bar3="downDevice"
              :datax="getDateArray(6)"
              :bar-name="['总计', '生产', '设备']"
            />
          </el-card>
        </div>
        <div class="area">
          <el-card class="item">
            <div class="radio-group">
              <el-radio-group v-model="radio3_1" text-color="#626aef" fill="rgb(239, 240, 253)" class="radio-right" size="small">
                <el-radio-button label="成材率" value="成材率" />
                <el-radio-button label="异常切损" value="异常切损" />
              </el-radio-group>
              <el-radio-group v-model="radio3_2" text-color="#626aef" fill="rgb(239, 240, 253)" class="radio-right" size="small">
                <el-radio-button label="日" value="day" />
                <el-radio-button label="周" value="week" />
                <el-radio-button label="月" value="month" />
              </el-radio-group>
            </div>
            <graph-bar-line
              :data-bar1="targetRate"
              :data-bar2="actualRate"
              :data-line1="completionRate"
              :datax="getDateArray(4)"
              :bar-name="['目标', '实际']"
              :line-name="['达成率']"
              :format-val="['达成率']"
            />
          </el-card>
          <el-card class="item">
            <div class="radio-group">
              <el-radio-group v-model="radio4_1" text-color="#626aef" fill="rgb(239, 240, 253)" size="small">
                <el-radio-button label="封闭量" value="封闭量" />
                <el-radio-button label="生产封闭" value="生产封闭" />
                <el-radio-button label="设备封闭" value="设备封闭" />
              </el-radio-group>
              <el-radio-group v-model="radio4_2" text-color="#626aef" fill="rgb(239, 240, 253)" size="small">
                <el-radio-button label="日" value="day" />
                <el-radio-button label="周" value="week" />
                <el-radio-button label="月" value="month" />
              </el-radio-group>
            </div>
            <graph-bar-line
              :data-bar1="closeTotal"
              :data-bar2="closeProduction"
              :data-bar3="closeDevice"
              :datax="getDateArray(6)"
              :bar-name="['总计', '生产', '设备']"
            />
          </el-card>
        </div>
        <div class="area">
          <el-card class="item">
            <graph-bar-line :data-bar1="kindproduction" :datax="kindproductionx" :title="'产品类别生产情况'" :bar-name="['产量']" />
          </el-card>
          <el-card class="item">
            <graph-bar-line
              :data-bar1="contract"
              :data-bar2="actualControl"
              :datax="Array.from({ length: 5 }, (_, i) => i + 1)"
              :title="'镀层精度情况'"
              :bar-name="['合同镀层', '实际控制精度']"
            />
          </el-card>
        </div>
        <div class="area">
          <el-card class="item">
            <graph-bar-line
              :data-bar1="carboard"
              :data-bar2="highSteel"
              :data-bar3="plastic"
              :datax="['7月份', '8月份', '9月份', '10月份']"
              :title="'利润'"
              :bar-name="['汽车板', '高强钢', '普料']"
            />
          </el-card>
          <el-card class="item">
            <el-tabs v-model="activeTab">
              <el-tab-pane label="安全通报" name="notice">
                <el-table
                  :data="noticeData"
                  :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
                  :cell-style="{ textAlign: 'center' }"
                  show-overflow-tooltip
                  size="small"
                >
                  <el-table-column prop="accidentName" label="事故名称" />
                  <el-table-column prop="date" label="时间" />
                  <el-table-column prop="responsibleParty" label="责任方" />
                  <el-table-column prop="handlingOpinion" label="处理意见" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="设备问题" name="device">
                <el-table
                  :data="deviceData"
                  :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
                  :cell-style="{ textAlign: 'center' }"
                  show-overflow-tooltip
                  size="small"
                >
                  <el-table-column prop="deviceName" label="事故名称" />
                  <el-table-column prop="date" label="时间" />
                  <el-table-column prop="responsibleParty" label="责任方" />
                  <el-table-column prop="status" label="完成状态" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="重点异议" name="mainDispute">
                <el-table
                  :data="mainDisputeData"
                  :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
                  :cell-style="{ textAlign: 'center' }"
                  show-overflow-tooltip
                  size="small"
                >
                  <el-table-column prop="disputeName" label="异议名称" />
                  <el-table-column prop="date" label="生产时间" />
                  <el-table-column prop="disputeReason" label="异议原因" />
                  <el-table-column prop="disputeCrew" label="异议班组" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, onUnmounted, nextTick, defineComponent, computed } from 'vue';
  import { ElMessage } from 'element-plus';
  import PersonInfoDisplay from '../components/PersonInfoDisplay.vue';
  import GraphBarLine from './components/GraphBarLine.vue';
  import dayjs from 'dayjs';

  const progress = reactive({
    actualP: 22222,
    targetP: 41800,
    actualS: 550,
    targetS: 504,
    pRate: computed((): number => {
      return Number(((progress.actualP / progress.targetP) * 100).toFixed(2));
    }),
    sRate: computed((): number => {
      return Number(((progress.actualS / progress.targetS) * 100).toFixed(2));
    }),
  });
  const curCrew = ref('甲班');
  const process = ref(['有效合同执行率', '跑偏降速次数', '外板最大生产速度', '后部工序质量判定符合度']);
  const processSub = ref(['92%', '2', '130', '95%']);

  const activeTab = ref('notice');

  const noticeData = ref([
    {
      accidentName: '光整液压站灭火器未点检',
      date: '2025/06/01',
      responsibleParty: '镀锌设备',
      handlingOpinion: '',
    },
  ]);

  const deviceData = ref([
    {
      deviceName: '清洗段1-2刷辊故障',
      date: '2025/06/01',
      responsibleParty: '机械',
      status: '未完成',
    },
  ]);

  const mainDisputeData = ref([
    {
      disputeName: '比亚迪外圈划伤',
      date: '2025/06/01',
      disputeReason: '1#卷取机甩尾划伤',
      disputeCrew: '甲',
    },
  ]);

  // ----------------------------- 图表数据 ----------------------------------------------------

  const getDateArray = (length: number) => {
    return Array.from({ length: length }, (_, index) => {
      return dayjs()
        .subtract(length - 1 - index, 'day')
        .format('YYYY-MM-DD');
    });
  };

  // 计划产量
  const plan = ref([1420, 1420, 1420, 1420, 1420, 1420, 1420, 1420]);
  // 实际产量
  const actual = ref([1508, 1427, 1339, 1687, 1543, 1439, 1322, 1763]);
  // 完成率
  const completion = ref([115.73, 115.73, 108.6, 136.82, 125.14, 116.71, 107.22, 142.98]);
  // 产能利用率
  const utilizationRate = ref([100.49, 100.49, 94.3, 118.8, 108.66, 107.22, 93.1, 124.15]);

  // 总计
  const downTotal = ref([40, 40, 40, 40, 40, 40]);
  // 生产
  const downProduction = ref([20, 20, 20, 20, 20, 20]);
  // 设备
  const downDevice = ref([20, 20, 20, 20, 20, 20]);

  // 目标
  const targetRate = ref([98.3, 98.3, 98.3, 98.3]);
  // 实际
  const actualRate = ref([98.27, 98.3, 98.02, 98.2]);
  // 达成率
  const completionRate = ref([99.969, 100, 99.715, 99.898]);

  // 总计
  const closeTotal = ref([40, 40, 40, 40, 40, 40]);
  // 生产
  const closeProduction = ref([20, 20, 20, 20, 20, 20]);
  // 设备
  const closeDevice = ref([20, 20, 20, 20, 20, 20]);

  // 产品类别生产情况
  const kindproduction = ref([12000, 4500, 7500, 22000, 17899, 1000, 38000, 0]);
  const kindproductionx = ref(['外板', 'FD级别', 'FC级别', 'FB级别', '高强钢', '钝化产品', '汽车板', '家电板']);

  // 镀层精度情况- 合同镀层
  const contract = ref([41, 51, 61, 71, 91]);
  // 实际控制精度
  const actualControl = ref([46, 55, 62, 80, 101]);

  // 利润-汽车板
  const carboard = ref([4.3, 2.5, 3.5, 4.5]);
  // 利润-高强钢
  const highSteel = ref([2.4, 4.4, 1.8, 2.8]);
  // 利润-普料
  const plastic = ref([2, 2, 3, 5]);

  const radio1_1 = ref<'day' | 'week' | 'month'>('day');
  const radio2_1 = ref<'度次降' | '生产降级' | '设备降级'>('度次降');
  const radio2_2 = ref<'day' | 'week' | 'month'>('day');
  const radio3_1 = ref<'成材率' | '异常切损'>('成材率');
  const radio3_2 = ref<'day' | 'week' | 'month'>('day');
  const radio4_1 = ref<'封闭量' | '生产封闭' | '设备封闭'>('封闭量');
  const radio4_2 = ref<'day' | 'week' | 'month'>('day');
</script>
<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  @border:1px solid #dcdfe6;

  .page-layout {
    width: 100%;
    position: relative;
    background-color: #fff;
    min-height: 100vh;
    margin-bottom: 1vh;
  }

  .aside {
    display: flex;
    flex-direction: column;
    gap: 1vh;

    .progress {
      display: flex;
      flex-direction: column;
      gap: 1vh;

      span {
        color: #333;
      }
    }

    .curCrew {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .carousel {
      min-height: 3vh;
      max-height: 10vh;

      .carousel-item {
        text-align: center;
        align-items: center;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 5px;

        .title {
          text-align: center;
          font-size: 2rem;
          font-weight: bold;
          color: #2c3e50;
          transition: all 0.5s ease;
          margin-bottom: 5px;
        }

        .sub {
          color: #666;
          line-height: 1.6;
          transition: all 0.5s ease 0.1s; /* 延迟动画，增强层次感 */
        }

        /* 装饰元素：动态线条 */
        .text-decoration {
          width: 5vw;
          height: 5px;
          background: linear-gradient(90deg, #3498db, transparent);
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 0.8s ease 0.3s; /* 延迟出现，增强流程感 */
        }
      }

      .is-active .text-decoration {
        transform: scaleX(1);
      }

      .el-carousel-item {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      /* 激活项动画：渐入+上移+缩放 */
      .el-carousel-item.is-active {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
  }

  .el-main {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    margin-top: -2.5vh;
    // padding: 12px;

    .area {
      display: flex;
      flex-wrap: nowrap;
      gap: 1vw;
      padding: 5px;
      // margin-top: -2vh;

      .item {
        height: 30vh;
        width: 50%;
      }
    }
  }

  .radio-group {
    display: flex;
    justify-content: space-between;
  }
  .radio-single {
    display: flex;
    justify-content: flex-end;
  }

  // ------------------------------------------------------------ element-plus样式深度穿透 -------------------------------------------
  :deep(.el-calendar) {
    --el-calendar-cell-width: 2vw;
  }
  :deep(.el-calendar .el-calendar__header) {
    padding: 0 !important;
  }
  :deep(.el-calendar .el-calendar__body) {
    padding: 8px 0px !important;
  }
  :deep(.el-calendar-day) {
    text-align: center;
  }
  :deep(.el-calendar__body) {
    display: inline-block;
    height: 88%;
    padding: 0 !important;
  }

  :deep(.el-carousel__container .el-carousel-item.is-active) {
    color: #2c69e8;
  }
</style>
